<div style="padding: 20px; text-align: center">
  <!-- TODO(waltercacau): move this into a CSS -->
  ${messages.instructions}<br /><br />
  <div data-dojo-type="dijit.form.Form" data-dojo-attach-event="onSubmit:_onSubmit" data-dojo-attach-point="_form" style="display: inline-block">
  <table>
    <tr>
      <td style="text-align: right"><label for="${id}_firstName">${messages.firstNameTextBoxLabel}</label></td>
      <td><input required="required" id="${id}_firstName" data-dojo-type="dijit.form.ValidationTextBox" style="width: 15em" data-dojo-attach-point="_firstNameTextBox"/></td>
    </tr>
    <tr>
      <td style="text-align: right"><label for="${id}_lastName">${messages.lastNameTextBoxLabel}</label></td>
      <td><input required="required" id="${id}_lastName" data-dojo-type="dijit.form.ValidationTextBox" style="width: 15em" data-dojo-attach-point="_lastNameTextBox"/></td>
    </tr>
    <tr>
      <td style="text-align: right"><label for="${id}_tosTextarea">${messages.tosTextareaLabel}</label></td>
      <td>
        <p><textarea id="${id}_tosTextarea" style="width: 20em; height: 10em; font-size: 75%;" data-dojo-attach-point="_tosTextarea" readonly="readonly">${messages.tosTextareaContent}</textarea></p>
        <p><input data-dojo-type="dijit.form.CheckBox" id="${id}_tosCheckbox" data-dojo-attach-point="_tosCheckbox"> <label for="${id}_tosCheckbox">${messages.tosCheckboxLabel}</label></p>
      </td>
    </tr>
    <tr>
      <td colspan="2"><button type="submit" data-dojo-type="dijit.form.Button" data-dojo-attach-point="_button" id="${id}_submitButton">${messages.submitButton}</button></td>
    </tr>
  </table>
  </div>
</div>
